import { Directive, ElementRef, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { AmChartsService } from '@amcharts/amcharts3-angular';

@Directive({
    selector: '[weightChart]',
})
export class WeightChartDirective implements OnInit, OnDestroy {
    private chart: any;
    private _chartData: any[] = [];

    @Input() chartID: string;

    @Input() verticalAxisName: string;
    @Input() verticalAxisMax: number;

    @Input() horizontalAxisName: string;
    @Input() horizontalAxisMax: number;

    @Input() set chartData(value: any[]) {
        if (value) {
            this._chartData = value;
            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    this.chart.dataProvider = this._chartData;
                });
            }
        }
    }

    constructor(private el: ElementRef, private AmCharts: AmChartsService, private renderer: Renderer2) { }

    ngOnInit() {
        const self = this;
        setTimeout(() => {
            let horizontalAxis = {
                id: 'horizontal',
                position: 'bottom',
                title: this.horizontalAxisName,
                minimum: 0,
                maximum: this.horizontalAxisMax,
                gridCount: 10,
                autoGridCount: false,
                axisAlpha: 0.3,
                gridAlpha: 0.3,
                gridThickness: 0,
                labelFunction: function(valueText) {
                    if (valueText === 0) {
                        return 'Low';
                    } else if (valueText === self.horizontalAxisMax) {
                        return 'High';
                    }

                    return '';
                },
                tickLength: 0,
                reversed: false
            };

            const balloon = {
                textAlign: 'left',
                borderThickness: 1
            };

            this.chart = this.AmCharts.makeChart(this.chartID, {
                type: 'xy',
                startDuration: 0,
                marginTop: 30,
                pathToImages: './assets/img/',
                allLabels: [{
                    'x': '!35',
                    'y': '35',
                    'text': 'Severe Risk',
                    'align': 'right',
                    'size': 10
                  }, {
                    'x': '85',
                    'y': '!75',
                    'text': 'Negligible Risk',
                    'align': 'left',
                    'size': 10
                  }],
                guides: [
                    {
                      'fillAlpha': 0.3,
                      'value': this.verticalAxisMax,
                      'toValue': this.verticalAxisMax
                    },
                    {
                        'fillAlpha': 0.3,
                        'value': this.horizontalAxisMax,
                        'toValue': this.horizontalAxisMax,
                        'valueAxis': 'horizontal'
                    },
                    {
                        'fillAlpha': 0.3,
                        'value':  0,
                        'toValue': 0,
                    }
                ],
                graphs: [
                    // weights
                    {
                        bullet: 'round',
                        bulletAlpha: 0.5,
                        bulletColor: '#B7C42E',
                        xField: 'exposure',
                        yField: 'management',
                        valueField: 'finalWeight',
                        lineAlpha: 0,
                        labelText: ' ',
                        labelPosition: 'inside',
                        labelFunction: function(data) {
                            return data.index + 1;
                        },
                        balloon: balloon,
                        balloonFunction: function(data) {
                            const item = data.dataContext;
                            return `
                                <strong>${item.name}</strong><br />
                                Exposure: ${item.exposure.toFixed(1)}<br />
                                Management: ${item.management.toFixed(1)}<br />
                                Contribution to ESG Risk Rating: ${item.finalWeight.toFixed(1)}%
                            `;
                        }
                    }
                ],
                valueAxes: [
                    {
                        id: 'vertical',
                        minimum: 0,
                        maximum: this.verticalAxisMax,
                        title: this.verticalAxisName,
                        axisAlpha: 0.3,
                        gridAlpha: 0.3,
                        gridThickness: 0,
                        dashLength: 0,
                        autoGridCount: false,
                        gridCount: 10,
                        labelFunction: function(valueText) {
                            if (valueText === 0) {
                                return 'Weak';
                            } else if (valueText === self.verticalAxisMax) {
                                return 'Strong';
                            }

                            return '';
                        },
                        tickLength: 0,
                        reversed: true
                    },
                    horizontalAxis
                ],
                minValue: -10,
                dataProvider: this._chartData
            });
        });
    }

    ngOnDestroy() {
        this.AmCharts.destroyChart(this.chart);
    }
}
